<template>
    <div>
        <span id="toTop" @click="backTop()" title="回到顶部"></span>
    </div>
</template>

<script>
export default {
    methods: {
        /*回到顶部实现过程注解：
    1.获取当前页面距离顶部的距离
    2.计算出每次向上移动的距离，用负的滚动距离除以5，因为滚动的距离是一个正数，想向上移动就是一个减法
    3.用当前距离加上计算出的距离，然后赋值给当前距离，就可以达到向上移动的效果
    4.最后在移动到顶部的时候，清除定时器
    */
        // 回到顶部
        backTop() {
            var timer = setInterval(function () {
                let osTop = document.documentElement.scrollTop || document.body.scrollTop;
                let ispeed = Math.floor(-osTop / 10);
                document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
                this.isTop = true;
                if (osTop === 0) {
                    clearInterval(timer);
                }
            }, 5);
        },
    },
}
</script>

<style lang="scss" scoped>
#toTop {
    background-color: $color-background-assistant;
    color: $color-main-text;
    font-size: $font-size-medium;
    position: fixed;
    bottom: 50px;
    right: 100px;
    height: 50px;
    width: 50px;
    border-radius: 100%;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
    z-index: 99;
}
</style>